<template>
	<div class="forumclass">
		<div>
			<el-main :span="24">
				<el-row :span="24">
					<a>发帖最多</a>
					<ol>
						<li>更多></li>
					</ol>
				</el-row>
				<hr><br>
				<el-row :span="24">
					<el-col :span="24">
						<el-col :span="3" style="text-align:center;">
							<el-col :span="24">
								<img src="../../../www/upload/Tulips.jpg" />
							</el-col>
							<el-col :span="24">
								<a>gsdgf</a>
							</el-col>
							<el-col :span="24">
								<a>浏览量</a>
							</el-col>
							<el-col :span="24">
								<el-button type="primary">关注</el-button>
							</el-col>
						</el-col>
						<el-col :span="3" style="text-align:center;">
							<el-col :span="24">
								<img src="../../../www/upload/Tulips.jpg" />
							</el-col>
							<el-col :span="24">
								<a>gsdgf</a>
							</el-col>
							<el-col :span="24">
								<a>浏览量</a>
							</el-col>
							<el-col :span="24">
								<el-button type="primary">关注</el-button>
							</el-col>
						</el-col>
						<el-col :span="3" style="text-align:center;">
							<el-col :span="24">
								<img src="../../../www/upload/Tulips.jpg" />
							</el-col>
							<el-col :span="24">
								<a>gsdgf</a>
							</el-col>
							<el-col :span="24">
								<a>浏览量</a>
							</el-col>
							<el-col :span="24">
								<el-button type="primary">关注</el-button>
							</el-col>
						</el-col>
						<el-col :span="3" style="text-align:center;">
							<el-col :span="24">
								<img src="../../../www/upload/Tulips.jpg" />
							</el-col>
							<el-col :span="24">
								<a>gsdgf</a>
							</el-col>
							<el-col :span="24">
								<a>浏览量</a>
							</el-col>
							<el-col :span="24">
								<el-button type="primary">关注</el-button>
							</el-col>
						</el-col>
						<el-col :span="3" style="text-align:center;">
							<el-col :span="24">
								<img src="../../../www/upload/Tulips.jpg" />
							</el-col>
							<el-col :span="24">
								<a>gsdgf</a>
							</el-col>
							<el-col :span="24">
								<a>浏览量</a>
							</el-col>
							<el-col :span="24">
								<el-button type="primary">关注</el-button>
							</el-col>
						</el-col>
						<el-col :span="3" style="text-align:center;">
							<el-col :span="24">
								<img src="../../../www/upload/Tulips.jpg" />
							</el-col>
							<el-col :span="24">
								<a>gsdgf</a>
							</el-col>
							<el-col :span="24">
								<a>浏览量</a>
							</el-col>
							<el-col :span="24">
								<el-button type="primary">关注</el-button>
							</el-col>
						</el-col>
						<el-col :span="3" style="text-align:center;">
							<el-col :span="24">
								<img src="../../../www/upload/Tulips.jpg" />
							</el-col>
							<el-col :span="24">
								<a>gsdgf</a>
							</el-col>
							<el-col :span="24">
								<a>浏览量</a>
							</el-col>
							<el-col :span="24">
								<el-button type="primary">关注</el-button>
							</el-col>
						</el-col>
						<el-col :span="3" style="text-align:center;">
							<el-col :span="24">
								<img src="../../../www/upload/Tulips.jpg" />
							</el-col>
							<el-col :span="24">
								<a>gsdgf</a>
							</el-col>
							<el-col :span="24">
								<a>浏览量</a>
							</el-col>
							<el-col :span="24">
								<el-button type="primary">关注</el-button>
							</el-col>
						</el-col>
						<br>
					</el-col>
				</el-row>
			</el-main>
			<el-main :span="24">
				<el-row :span="24">
					<a>热门帖子</a>
					<ol>
						<li>更多></li>
					</ol>
				</el-row>
				<hr><br>
				<el-row :span="24">
					<template>

						<div class="imgfonrpic" v-for="item in ForumClass">
							<img :src="item.forumbPic" style="width:270px;height:280px;border-radius:initial;" />
							<div>
								<h4><span>{{item.forumBName.substr(0,12)}}</span></h4>
								<h5>作者：<span>{{item.userName}}</span>&emsp;浏览量：<span>{{item.forumBNum}}</span>&emsp;点赞：<span>{{item.FCcommentNum}}</span></h5>
							</div>
						</div>
					</template>
				</el-row>
			</el-main>
			<el-main :span="24">
				<el-row :span="24">
					<a>最新发布</a>
					<ol>
						<li>&emsp;今日发帖:1314</li>
						<li>&emsp;历史最高:1314521</li>
						<li>&emsp;会员:921376236</li>
					</ol>
				</el-row>
				<hr>
				<el-row :span="24">
					<!--单个贴子开始位置-->
					<el-col :span="12" v-for="item in ForumClass" style='margin:7.5px auto;'>
						<el-col :span="3">
							
						</el-col>
						<el-col :span="21">
							<p>
								<strong>{{item.forumBName}}</strong>
								<br>
								<span>
									<a>{{item.userName}}&nbsp;</a>
									<a>&nbsp;<i>图标</i>&nbsp;{{item.forumBNum}}</a>
									<a>&nbsp;<i>品论图标</i>&nbsp;{{item.FCcommentNum}}</a>
								</span>
							</p>
						</el-col>
					</el-col>
				</el-row>
			</el-main>
			<!--绑定帖子分类-->
			<el-row v-for="item in ForumType">
				<el-main :span="24">
					<el-row :span="24">
						<a>{{item.forumAName}}</a>
						<ol>
							<li>&emsp;今日发帖:1314</li>
							<li>&emsp;历史最高:1314521</li>
							<li>&emsp;会员:921376236</li>
						</ol>
					</el-row>
					<hr><br>
					<el-row :span="24">
						<!--绑定帖子-->
						<el-col :span="12" style='margin:7.5px auto;'>
							<el-col :span="3">
								<img src="../../../www/upload/Tulips.jpg" />
							</el-col>
							<el-col :span="21">
								<p>
									<strong>帖子标题</strong>
									<br>
									<span>
										<a>&nbsp;作者名</a>
										<a>&nbsp;<i>图标</i>&nbsp;浏览量</a>
										<a>&nbsp;<i>图标</i>&nbsp;总评论数</a>
									</span>
								</p>
							</el-col>
						</el-col>
						<!--单个贴子结束位置-->
						<!--绑定帖子-->
						<el-col :span="12" style='margin:7.5px auto;'>
							<el-col :span="3">
								<img src="../../../www/upload/Tulips.jpg" />
							</el-col>
							<el-col :span="21">
								<p>
									<strong>帖子标题</strong>
									<br>
									<span>
										<a>&nbsp;作者名</a>
										<a>&nbsp;<i>图标</i>&nbsp;浏览量</a>
										<a>&nbsp;<i>图标</i>&nbsp;总评论数</a>
									</span>
								</p>
							</el-col>
						</el-col>
						<!--单个贴子结束位置-->
						<!--绑定帖子-->
						<el-col :span="12" style='margin:7.5px auto;'>
							<el-col :span="3">
								<img src="../../../www/upload/Tulips.jpg" />
							</el-col>
							<el-col :span="21">
								<p>
									<strong>帖子标题</strong>
									<br>
									<span>
										<a>&nbsp;作者名</a>
										<a>&nbsp;<i>图标</i>&nbsp;浏览量</a>
										<a>&nbsp;<i>图标</i>&nbsp;总评论数</a>
									</span>
								</p>
							</el-col>
						</el-col>
						<!--单个贴子结束位置-->
						<!--绑定帖子-->
						<el-col :span="12" style='margin:7.5px auto;'>
							<el-col :span="3">
								<img src="../../../www/upload/Tulips.jpg" />
							</el-col>
							<el-col :span="21">
								<p>
									<strong>帖子标题</strong>
									<br>
									<span>
										<a>&nbsp;作者名</a>
										<a>&nbsp;<i>图标</i>&nbsp;浏览量</a>
										<a>&nbsp;<i>图标</i>&nbsp;总评论数</a>
									</span>
								</p>
							</el-col>
						</el-col>
						<!--单个贴子结束位置-->
					
					</el-row>
				</el-main>
			</el-row>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'ForumClass',
		data() {
			return {
				ForumType: [],
				ForumClass: [],
				msg: '帖子分类'
			}
		},
		mounted() {
			//加载帖子分类
			this.axios.post('/api/HomePageInterface/ForumType', this.qs.stringify({}), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				})
				.then(function(res) {
					if (res.data.status == "200") {
						this.ForumType = res.data.msg;
						console.log(this.ForumType[0].forumAId);
					}
					//控制台打印请求成功时返回的数据
					//bind(this)可以不用
				}.bind(this))
				.catch(function(err) {
					if (err.response) {
						console.log(err.response)
							//控制台打印错误返回的内容
					}
				}.bind(this));
				
				
				
			//加载帖子
			this.axios.post('/api/HomePageInterface/ForumClass', this.qs.stringify({
			}), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				})
				.then(function(res) {
					if (res.data.status == "200") {
						console.log(this.ForumType[0].forumAId);
            for(let i=0;i<res.data.msg.length;i++)
            {
              res.data.msg[i].forumbPic="/api/img/"+ res.data.msg[i].forumbPic;
            }
						this.ForumClass = res.data.msg;
					}
					//控制台打印请求成功时返回的数据
					//bind(this)可以不用
				}.bind(this))
				.catch(function(err) {
					if (err.response) {
						console.log(err.response)
							//控制台打印错误返回的内容
					}
				}.bind(this));
				
				
		},
		methods: {
			//			showGoods() {
			//				//加载商品信息
			//				this.axios.post('/api/userInfo', this.qs.stringify({}), {
			//					headers: {
			//						'Content-Type': 'application/x-www-form-urlencoded'
			//					}
			//				}).then(function(res) {
			//					console.log(res.data);
			//					if (res.data.status == "1") {
			//						alert(res.data.msg);
			//					}
			//				}).catch(function(err) {
			//					if (err.response) {
			//						console.log(err.response);
			//					}
			//				});
			//				showGoods();
			//			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.forumclass {
		background: white;
		width: 90%;
		margin: 0px auto;
		text-align: left;
	}
	
	.forumclass ol {
		float: right;
	}
	
	.forumclass span {
		font-size: 12px;
	}
	
	.forumclass ol li {
		font-size: 12px;
		text-align: right;
		float: left;
	}
	
	.forumclass img {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		text-align: center;
	}
	
	.imgfonrpic {
		width: 270px;
		height: 280px;
		border: 1px dashed gray;
		position: relative;
		float: left;
		margin: 10px;
		border-radius: 5px;
		cursor: pointer;
	}
	
	.imgfonrpic div {
		position: absolute;
		bottom: -5px;
		width: 280px;
		height: 50px;
		background: #FFFFFF;
		opacity: 0.5;
		display: none;
	}
	
	.imgfonrpic:hover.imgfonrpic div {
		display: block;
	}
	
	.imgfonrpic div span {
		margin: 0 auto;
	}
	
	h4,
	h5 {
		text-align: center;
		line-height: 25px;
		opacity: 1;
	}
</style>
